<template>
	<view class="supermarket">
		<xbd-pages-content title="无人超市">
			<template #content>
				<view class="content">
					<view class="total">
						<view class="card blue">
							<image class="icon" src="../../static/images/supermarket/money.png" mode=""></image>
							<view class="msg">
								<view class="num"><text>{{today.todayIncome | priceFormat(2,'¥',true)}}</text>元</view>
								<view class="tag">今日收入</view>
							</view>
						</view>
						<view class="card yellow">
							<image class="icon" src="../../static/images/supermarket/people.png" mode=""></image>
							<view class="msg">
								<view class="num"><text>{{today.todayCount | priceFormat(0,'',true)}}</text>人次</view>
								<view class="tag">今日消费人次</view>
							</view>
						</view>
						<view class="card blue" @click="clickRight">
							<image class="icon" src="../../static/images/supermarket/goods.svg" mode=""></image>
							<view class="msg">
								<view class="num"><text>{{today.totalInventory | priceFormat(0,'',true)}}</text>件</view>
								<view class="tag">库存总量</view>
							</view>
							<view >
								<image class="card_right" src="../../static/images/right.svg" mode=""></image>
							</view>
						</view>
					</view>
					<view class="goods">
						<view class="box" v-for="(item,index) in list" :key="index" >
							<view class="left">
								{{item.text}}
							</view>
							<view class="box_type">
								<view class="centre">
									{{item.product}}
								</view>
								<view class="line">
								</view>
								<view class="right">
									<text>{{item.num}}</text>{{item.unit}}
								</view>
							</view>
							
						</view>

					</view>
					<view class="chart">
						
						<!-- 消费人次 -->
						<view class="tag">
							<view class="left">
								<view class="br">
								</view>
								消费人次：近24小时
							</view>
						</view>
						<view class="chart1">
							<chart-super-line :chartData="consumptionTimesToday"></chart-super-line>
						</view>
						
						<!-- 消费品分析 -->
						
						<view class="tag">
							<view class="left">
								<view class="br">
								</view>
								消费品分析
							</view>
							<view class="right">
								<view :class="['tab', tabActive === 0 ? 'active' : '' ]"  @click="tabLeft">
									销量
								</view>
								<view :class="['tab', tabActive === 1 ? 'active' : '' ]"  @click="tabRight">
									销售额
								</view>
							</view>
						</view>
						<xbd-date :date.sync="date"></xbd-date>

						<view class="chart2">
							<chart-radar v-if="drawing" :chartData="consumerGoodsAnalysis"></chart-radar>
						</view>
						
						<!-- 营业额 -->
						
						<view class="tag">
							<view class="left">
								<view class="br">
								</view>
								营业额：近6个月
							</view>
						</view>
						<view class="chart1">
							<chart-super-bar :chartData="turnoverHalfAYear"></chart-super-bar>
						</view>
						
						<!-- 日人均消费 -->
						
						<view class="tag">
							<view class="left">
								<view class="br">
								</view>
								日人均消费额：近6月
							</view>
						</view>
						<view class="chart1">
							<chart-super-line-area  :chartData="averageDailyConsumptionHalfAYear"></chart-super-line-area>
						</view>
						
						<!-- 库存物品盘点 -->
						
						<view class="tag" >
							<view class="left">
								<view class="br">
								</view>
								库存物品盘点
							</view>
						</view>
						
						<view class="goods_date">
							日期：{{cardList.time}}
						</view>
						
						<view class="goodsNum">
							<view class="goods_box" v-for="(item,index) in cardList.list" :key="index">
								<view class="number">
									{{item.y}}
								</view>
								<view class="">
									{{item.x}}
								</view>
							</view>
						</view>
						
					</view>
				</view>
			</template>
		</xbd-pages-content>

	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import { Supermarket } from '@/api/index.js';

	const dayjs = require('dayjs');
	const date = dayjs(new Date()).format('YYYY-MM') // '25/01/2019'
	export default {
		data() {
			return {
				today:{
					todayIncome:'',
					todayCount:'',
					totalInventory:'',
				},
				drawing:true,
				date: date,
				list:[],
				tabActive: 0,
				consumptionTimesToday: {
					unit:'人次',
					name: '消费人次',
					color: '#394954',
					x: 'x',
					y: 'y',
					data: []
				},
				consumerGoodsAnalysis:{
					unit:'',
					color: '#457AFF',
					x: 'x',
					y: 'y',
					data: []
				},
				turnoverHalfAYear: {
					color: '#FAC52A',
					unit:'元',
					name: '营业额',
					x: 'x',
					y: 'y',
					data: []
				},
				averageDailyConsumptionHalfAYear: {
					unit:'元',
					name: '日人均消费额',
					color: '#394954',
					x: 'x',
					y: 'y',
					data: []
				},
				cardList: {
					time:'-',
					list:[]
				},
					
				reqInfo:{
					type:'item',
					option:'count',
					time: +dayjs(date)
				}
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods:{
			clickRight(){
				uni.navigateTo({
					url: './inventory',
				})
				console.log(123)
			},
			tabLeft(){
				this.tabActive = 0
				this.reqInfo.option ='count'
				this.getAnalysis()
			},
			tabRight(){
				this.tabActive = 1
				this.reqInfo.option ='amount'
				this.getAnalysis()
			},
			// 获取消费品分析
			async getAnalysis() {
				this.$showLoading('加载中');
				try {
					const res = await Supermarket.getChartList(this.reqInfo);
					uni.hideLoading();
					this.consumerGoodsAnalysis.data = res.data.chart;
					this.drawing = false
					this.$nextTick(()=>{
						this.drawing = true
						
					})
				}catch(e) {
					uni.hideLoading();
					console.log(e);
				}
			},
			// 初始化数据
			async init() {
				const list = [
					Supermarket.getNumberType(),
					Supermarket.getTextList(),
					Supermarket.getChartList({type:'person'}),
					Supermarket.getChartList({type:'amount'}),
					Supermarket.getChartList({type:'perday'}),
					Supermarket.getChartList({type:'item',option:'count',time: this.reqInfo.time}),
					Supermarket.getChartList({type:'inventory'}),
				]
				this.$showLoading('加载中');
				Promise.all(list).then( res =>{
					uni.hideLoading();
					this.today = res[0].data.count;
					this.list = res[1].data.list;
					this.consumptionTimesToday.data = res[2].data.chart;
					res[3].data.chart.forEach((item)=>{
						 item.name = '营业额'
					});
					this.turnoverHalfAYear.data = res[3].data.chart
					this.averageDailyConsumptionHalfAYear.data = res[4].data.chart;
					this.consumerGoodsAnalysis.data = res[5].data.chart;
					this.cardList = res[6].data.chart;
					console.log(this.cardList)
					
				}).catch( err =>{
					// this.$showToast(err);
				})
			
			},
		},
		watch: {
			date(newVal,oldVal){
				this.reqInfo.time = +dayjs(this.date)
				this.getAnalysis()
			}
		},
			
		onLoad(){
			console.log(+dayjs(this.date))
						this.init();
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.total {
			// height: 100px;
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 20px 30rpx;
			display: flex;
			justify-content: space-between;

			.card {
				position: relative;
				box-sizing: border-box;
				padding: 10px 0 10px 24rpx;
				width: 220rpx;
				// height: 60px;
				border-radius: 8rpx;

				.icon {
					position: absolute;
					top: 14px;
					left: 10rpx;
					width: 64rpx;
					height: 64rpx;
				}
				.card_right{
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					top: 16px;
					right: 10rpx;
					
				}
				.msg {
					text-align: center;
					font-size: 24rpx;
					color: #FFFFFF;

					.num {
						text{
							font-size: 28rpx;
							margin-right: 10rpx;
						}
					}

					.tag{
						margin-top: 2px;
					}
				}
			}

			.blue {
				background-color: #457AFF;
				// margin-right: 50rpx;
			}

			.yellow {
				background-color: #FAC52A;
			}
		}
		.goods{
			margin: 5px 0;
			// height: 96px;
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding:20px 50rpx;
			font-size: 28rpx;
			color: #394954;
			.box{
				.box_type{
					margin: 15px 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.left{
					border-left: 4rpx solid #457AFF ;
					box-sizing: border-box;
					padding-left: 30rpx;
				}
				.centre{
					margin-left: 40rpx;
					color:#FAC52B ;
				}
					
				.line{
					flex: 1;
					box-sizing: border-box;
					margin: 0 20rpx;
					height: 2px;
					border-bottom: 1px dashed   #999999;
				}
				.right{
					text-align: right;
					text{
						font-size: 32rpx;
						color: #457AFF;
						margin-right: 10rpx;
					}
				}
			}

		}
		.chart{

			padding: 20px 50rpx;
			background-color: #FFFFFF;
			.tag{
				display: flex;
				justify-content: space-between;
				position: relative;
				box-sizing: border-box;
				padding-left: 30rpx;
				font-size: 32rpx;
				color: #194769 ;
				margin-bottom: 20px;
				.br {
					position: absolute;
					top: 6px;
					left: 0;
					width: 4rpx;
					height: 10px;
					background-color: #3587EE;
				}
				.right{
					display: flex;
					.tab{
						margin-left: 20rpx;
						height: 18px;
						width: 88rpx;
						border: 1px solid #999999;
						border-radius: 4rpx;
						color: #999999;
						font-size: 24rpx;
						text-align: center;
						line-height: 18px;
						&.active{
							color: #457AFF !important;
							border-color: #457AFF !important;
						}
					}
				}
			}
				
			.chart1{
				height: 180px;
				width: 720rpx;
				box-sizing: border-box;
				margin-left:-50rpx;
				margin-bottom: 20px;
			}
			.chart2{
				height: 225px;
				width: 600rpx;
				margin: 20px 0 20px 30rpx;
			}

		}
			
		.goods_date{
			margin-left: 40rpx;
			font-size: 24rpx;
			color: #999999 ;
			margin-bottom: 15px;
		}
		.goodsNum{
			display: flex;
			width: 670rpx;
			flex-wrap: wrap;
			
			.goods_box{
				width: 200rpx;
				// height: 62px;
				color: #555555;
				font-size: 32rpx;
				text-align: center;
				box-sizing: border-box;
				border: 2rpx solid  rgba(69, 122, 255, .1);
				background-color: rgba(69, 122, 255, .1);
				border-radius: 8rpx;
				box-sizing: border-box;
				padding: 10px 0;
				margin-right: 20rpx;
				margin-bottom: 10px;
				.number{
					font-size: 32rpx;
					color: #555555;
				}
			}
		}
	}
</style>
